<template>
  <div class="container">
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="60%" @closed="closeFn">
      <!-- 具体 -->
      <el-row>
        <el-col :span="6">
          <div
            class="grid-content bg-purple-dark"
          >【题型】 : {{detailList.questionType === '1'? '单选' : (detailList.questionType === '2'? '多选' : '简答')}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-dark">【编号】 : {{detailList.id}}</div>
        </el-col>
        <el-col :span="6">
          <div
            class="grid-content bg-purple-dark"
          >【难度】 : {{detailList.difficulty === '1'? '简单' : (detailList.difficulty === '2'? '一般' : '困难')}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-dark">【标签】 : {{detailList.tags}}</div>
        </el-col>
      </el-row>
      <el-row style="border-bottom: 1px solid black;">
        <el-col :span="6">
          <div class="grid-content bg-purple-dark">【学科】 : {{detailList.subjectName}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-dark">【目录】 : {{detailList.directoryName}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-dark">【方向】 : {{detailList.direction}}</div>
        </el-col>
      </el-row>
      <el-row style="margin-top:10px">
        <el-col :span="24" style="padding:0">
          <span>【题干】:</span>
          <div
            class="grid-content bg-purple-dark"
            style="color:#0000ff;"
            v-html="detailList.question"
          ></div>
        </el-col>
        <el-col :span="24" style="border-bottom: 1px solid black;padding:0px">
          <div>单选题 选项：（以下选中的选项为正确答案）</div>
          <div v-for="item in detailList.options" :key="item.id" style="margin: 10px 0">
            <el-radio
              v-if="detailList.questionType==='1'"
              :value="item.isRight"
              :label="1"
            >{{item.title}}</el-radio>
            <el-checkbox
              v-if="detailList.questionType==='2'"
              :value="item.isRight?true:false"
            >{{item.title}}</el-checkbox>
          </div>
        </el-col>
        <el-col :span="24" style="border-bottom: 1px solid black;padding:10px 0 ">
          <span>【参考答案】:</span>
          <el-button
            type="danger"
            size="small"
            @click="isShow= true"
            style="margin-left:10px;margin-bottom:10px"
          >视频答案预览</el-button>
          <div v-if="isShow">
            <video controls :src="detailList.videoURL" style="width: 400px;height: 300px;"></video>
          </div>
        </el-col>

        <el-col :span="24" style=" border-bottom: 1px solid black;padding:10px 0 ">
          【答案解析】:
          <div style="display:inline-block" v-html="detailList.answer"></div>
        </el-col>
        <el-col :span="24" style="padding:5px 0 ">
          【题目备注】:
          <span>{{detailList.remarks}}</span>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'questionsPreview',
  data () {
    return {
      dialogVisible: false, // 弹出框
      detailList: [], // 基础题详情列表
      radio: null, // 单选框的默认选中
      checkList: null, // 多选框的默认选中
      isShow: false
    }
  },
  methods: {
    // 预览
    async view (id) {
      const res = await detail({ id })
      console.log(res)
      this.detailList = res.data
      this.dialogVisible = true
    },
    closeFn () {
      this.isShow = false
      this.dialogVisible = false
    }
  }

}
</script>

<style scoped lang='less'></style>
